<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 2</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
    // // 创建一个vue实例,点击按钮实现字符串反转的一个效果
    // Vue.createApp({
    //     data(){
    //         return{
    //             content:'hello world'
    //         }
    //     },
    //     methods:{  // 函数都写在methods里面
    //         handleBtnClick(){
    //             // alert('hello');
    //             // this.content='dlrow olleh';  // 点击按钮让content的内容变成dlrow olleh
    //             // 先将字符串打散,然后反转一下,再拼接成新的字符串赋值给content
    //             this.content= this.content.split('').reverse().join('');
    //         }
    //     },
    //     // 点击按钮触发handleBtnClick函数实现内容反着打印出来
    //     // 使用v-on:click给按钮绑定一个点击事件
    //     template:`
    //         <div>
    //             {{content}}
    //             <button v-on:click="handleBtnClick">反转</button>  
    //         </div>
    //     `
    // }).mount('#root')


    // // 创建一个vue实例,点击按钮实现hello world的显示与隐藏
    // Vue.createApp({
    //     data(){
    //         return{
    //             show:true,
    //         }
    //     },
    //     methods:{  // 函数都写在methods里面
    //         handleBtnClick(){
    //             // show为true时hello world显示
    //             // show为false时hello world隐藏
    //             this.show=!this.show;   // 点击按钮时对show进行取反   true变false  false变true
    //         }
    //     },
    //     // 点击按钮触发handleBtnClick函数实现hello world的显示和隐藏
    //     // 使用v-on:click给按钮绑定一个点击事件
    //     // 通过v-if来控制元素的显示和隐藏
    //     template:`
    //         <div>
    //             <span v-if="show">hello world</span>
    //             <button v-on:click="handleBtnClick">显示/隐藏</button>  
    //         </div>
    //     `
    // }).mount('#root')
</script>